<template>
	<table class="table" border="1" cellpadding="0" cellspacing="0">
		<tr class="table_tr">
			<th class="table_th" :width="item.width || ''" :align="item.align || 'left'" v-for="(item,index) in columns"
				:key="index">
				{{item.title}}
			</th>
		</tr>
		<tr class="table_tr" v-for="(item,index) in data" :key="index" @click="change(item)">
			<block v-for="(th, i) in columns" :key="i">
				<td class="table_td" :width="th.width || ''" :align="th.align || 'left'" v-if="th?.tool">
					<view class="table_td_tool">
						<view class="table_td_tool_item" v-for="(tool, t) in th.tool" :key="t"
							@click.stop="changeTool(tool, item)">
							{{tool}}
						</view>
					</view>

				</td>
				<td class="table_td" :width="th.width || ''" :align="th.align || 'left'" v-else>{{item[th.field]}}
				</td>
			</block>
		</tr>

	</table>
	<view class="empty" v-if="!data.length">
		暂无数据
	</view>
	<view class="pagination">
		<view class="pagination_previous" @click="changePage('previous')">
			<rui-icons type="left"></rui-icons>
		</view>
		<view class="pagination_number">
			<view class="pagination_number_item" :class="page == index ? 'current':''" v-for="index in count"
				:key="index" @click="changePage(index)">
				{{index}}
			</view>
		</view>
		<view class="pagination_next" @click="changePage('next')">
			<rui-icons type="right"></rui-icons>
		</view>
		<view class="pagination_total">
			共{{total}}条
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';

	let props = defineProps({
		columns: Array,
		data: Array,
		total: Number,
		limit: Number,
	})
	let count = ref(1)

	watch(() => props.total, (n, o) => {
		count.value = Math.ceil(n / props.limit)
	})

	let page = ref(1)
	const emits = defineEmits(['change'])
	const change = (data) => {
		emits('change', {
			type: 'rows',
			data
		})
	}

	const changeTool = (event, data) => {
		emits('change', {
			type: 'tool',
			data,
			event
		})
	}

	const changePage = (data) => {
		if (data == 'previous') {
			if (page.value <= 1) return;
			page.value = page.value - 1;
		} else if (data == 'next') {
			if (page.value >= count.value) return;
			page.value = page.value + 1;
		} else {
			page.value = data;
		}
		emits('change', {
			type: 'page',
			data: page.value
		})
	}
</script>

<style lang="scss" scoped>
	.empty {
		text-align: center;
		padding: 40px;
		background: #fff;
		border: 1px solid #e8e8e8;
		margin-top: -1px;
		color: #999;
	}

	.current {
		background: var(--color);
		color: #fff;
	}

	.pagination {
		display: flex;
		align-items: center;
		width: 100%;
		margin: 15px 0 5px;

		&_total {
			padding: 5px 10px;
		}

		&_next {
			padding: 5px 10px;
		}

		&_previous {
			padding: 5px 10px;
		}

		&_number {
			display: flex;
			margin: 0 5px;

			&_item {
				width: 30px;
				height: 30px;
				border-radius: 10px;
				text-align: center;
				line-height: 30px;
			}
		}
	}

	table,
	tr,
	th,
	td {
		border: 1px solid #e8e8e8;
		background: #fff;
	}

	.table {
		width: 100%;
		border-bottom: 0;

		&_tr {
			&:last-child {
				border-bottom: 0;
			}
		}

		&_th {
			border-left: 0;
			border-top: 0;
			padding: 15px;
			border-bottom: px solid #eee;
			font-size: 16px;

			&:last-child {
				border-right: 0;
			}
		}

		&_td {
			border-left: 0;
			border-top: 0;
			padding: 10px;

			&_tool {
				display: flex;
				justify-content: center;

				&_item {
					border-right: 1px solid #e5e5e5;
					padding: 0 10px;
					color: var(--color);

					&:last-child {
						border-right: 0;
					}
				}
			}


			&:last-child {
				border-right: 0;
			}
		}
	}
</style>